<template>
  <div>
    <div class="top">
      <!-- 菜单 -->
      <ul class="menu">
        <a href="/">
            <li>首页</li> 
        </a>
        <a href="/works">
            <li>作品集</li>
        </a>
        <a href="/top">
            <li>TOP榜单</li>
        </a>
        <a href="/branchs">
            <li>设计组织</li>
        </a>
        <li>...</li>
      </ul>

      <!-- 轮播图 -->
      <el-carousel :interval="5000" arrow="always" height="350px">
        <el-carousel-item v-for="(item, index) in imgList" :key="index">
          <img :src="item.url" alt="" class="imgList">
        </el-carousel-item>
      </el-carousel>
    </div>
    
    <!-- 一级部门 -->
    <div class="top_rotation">
      <el-row type="flex" justify="space-between">
        <el-col :span="3" v-for="(item, index) in firstNavigation" :key="index">
          <el-card shadow="hover" class="top-rotation-top" >
            <img :src="item.cover" class="image"  @click="goBranch(item.navId)">
            <span>{{item.navigation}}</span>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 内容 -->
    <div>
      <Content></Content>
    </div>
    
    <!-- 底部 -->
    <Footer></Footer>
    <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
  </div>
</template>
<script>  
// @ is an alias to /src
import Content from '@/components/Content.vue'
import Footer from '../components/footer.vue'
export default {
  name: 'Home',
  components: {
    Content,
    Footer
  },
  data() {
    return {
      activeIndex: '1',
      activeIndex2: '1',
      imgList: [
        {url: require('../assets/images/one.jpg')},
        {url: require('../assets/images/two.jpg')},
        {url: require('../assets/images/three.jpg')},
        {url: require('../assets/images/four.jpg')}
      ],
      // 获取一级部门数据
      firstNavigation: []
    }
  },
  mounted() {
    var ip = window.location.host;
    localStorage.setItem('userIp',ip.split(":")[0]);
    this.getNavigation()
  },
  methods: {
    // 获取一级部门数据
    getNavigation() {
      this.$http.get(this.$api.getNavigation)
      .then((res) => {
        if(res.data.status === 20000) {
          res.data.data.navigation.map((value, key) => {
            this.firstNavigation.push(value)
          })
        }else {
          this.$message.error("获取一级部门数据失败")
        }
      })
      .catch((err) => {
        console.log(err);
      })
    },
    // 跳转到各部门
    goBranch(item) {
      this.$router.push({
        path: '/branch',
        query: {
          id: item
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.top {
  position: relative;
  .menu {
    position: absolute;
    top: 5px;
    left: 72px;
    list-style: none;
    z-index: 999;
    a:nth-child(1) li {
      background: #e1e4eab5;
    }
    li {
      float: left;
      border-radius: 4px;
      min-width: 90px;
      height: 27px;
      line-height: 27px;
      color: #fff;
      cursor: pointer;
      margin-right: 25px;
    }
    li:hover {
      background: #e1e4eab5;
    }
  }
}
.imgList {
  width: 100%;
  height: 100%;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}
.el-carousel__item:nth-child(2n) {
  background-color: #d3dce6;
}
.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
.top_rotation {
  background: #d3dce682;
  padding: 18px;
  padding-bottom: 22px;
  .el-row {
    display: flex;
  }
  .el-col-3:hover {
    transform: translateY(-10px);
  }
  .top-rotation-top {
    border-radius: 13%;
  }
  .el-col-3 {
    cursor: pointer;
    width: 13.5%;
  }
  img {
    border-radius: 50%;
    width: 50%;
    height: 50%;
  }
}
.top_rotation /deep/ .el-card__body {
   flex-flow: column;
    font-size: 13px;
    display: flex;
    padding: 7px;
    align-items: center;
}
.top_rotation /deep/ .el-card{
  height: 100%;
}
.top_rotation /deep/ .el-col :hover .el-card__body {
  transform: scale(1.05);
}
</style>
